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ABSTRACT 



This paper shows how to use design patterns for building 
educational multimedia applications. The first section summarizes design 
issues related to organizing the information, the organization of the 
interface, and implementation. Navigating through information is covered in 
the second section, including problems, motivations, and solutions, and 
relevance to EMS (Educational Multimedia Systems) related to navigational 
context and information factoring. The third section describes the 
organization of the interface in terms of problems, motivations, and 
solutions related to inf ormat ion- interaction decoupling, behavioral grouping, 
behavioral anticipation, and process feedback. It is concluded that, through 
the use of patterns, authors are able to identify common design problems and 
express solutions in a methodology- independent manner; the set of patterns 
also provides authors with a common language and access to the ideas behind 
successful EMS. Six figures present examples from current educational 
multimedia software. Contains 10 references. (DLS) 
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^ Abstract: 

qq Designing and implementing Educational Multimedia Systems (EMS) is hard; even 

when design methods may help in this task, most critical design decisions remain 
undocumented making reuse a difficult task 

In this paper we show how to use design patterns while building Educational 
Multimedia Applications. We first present the idea of design patterns and then discuss some 
simple though effective design patterns addressing different concerns in this kind of 
applications. Each one of them is exemplified with successful educational applications. 



1. Introduction 

In the past four years there has been a growing interest in hypermedia design techniques. The different 
problems an educational hypermedia author has to deal with are complex, since the combination of navigation 
through an intricate information space with the unstructured nature of multimedia data poses new challenges. 
There are some well-established notions of good hypermedia development, outlining three groups of design 
issues: 

• The first group comprises the problem of organizing the information: 

How do we organize the information space to let the user navigate following meaningful links 
established between information units , and let the users understand? 

• The second group of design issues explores the organization of the interface: 

Which objects the user will perceive and how these objects relate to the navigation objects ? 

How will the interface behave as the user exercises it? 

• The third group of design issues has to do with implementation: 

How these information units mapped into pages? 

How are navigation operations and interface objects implemented? 

Design Methodologies help the software designer to express an idea with an appropriate language, and 
the way it has to be implemented. Unfortunately, there is an important issue that no existing methodology 
addresses and that is: how to make good, effective designs. 

This is the barrier that separates successful experienced hypermedia authors from the rest. Having 
reached a certain maturity in the process of designing hypermedia applications it was, until now, hard to talk 
about effective design solutions and convey experience to other people, mostly due to the lack of an abstraction 
mechanism. 

Such a mechanism allows to express design strategies to face common design problems and to record 
design experience; it is a language to talk about how things must be designed rather than how they are written 
under any given methodology. If we are not capable of transmitting the experience gained through the years, 
how will we develop and enhance the next generation of Educational Multimedia Systems? 

Though originated in architecture [Alexander77] design patterns are being increasingly used in software 
design [Gamma95]. Design patterns are a good means for recording design experience as they systematically 
name, explain and evaluate important and recurrent designs in software systems. They describe problems that 







occur repeatedly, and describe the core of the solution to that problem, in such a way that we can use this 
solution many times in different contexts and applications. Looking at known uses of a particular pattern, we can 
see how successful designers solve recurrent problems. 

In some cases, it is possible to give structure to simple patterns to develop a pattern language: a partially 
ordered set of related patterns that work together in the context of certain application domain. Design Patterns 
complement methodologies in that they address problems at a higher level of abstraction. Many design decisions 
that cannot be recorded through the uses of the primitives of a method can be described using patterns. 

We next present a set of simple design patterns that address usual concerns in Educational Applications; 
though it is not our objective in this paper to show how they interact with each other, it will be clear from each 
example that they can be used together in a synergistic way. 

2. Navigating through information 

The patterns presented in this section, face common problems in the organization and access to the 
information. There is an underlying idea connecting the patterns presented here that stressed the importance of a 
clean separation between interface and. Some methodologies such as OOHDM [Schwabe96] propose an 
architectural model that follows this principle. Similar separations can be found in other methodologies such as 
RMM [Isakowitz95] and HDM [Garzotto93]. 

We next present some patterns discovered and used in the context of developing educational multimedia 
applications. We describe them using a single template describing the problem that originates the patterns, the 
motivation, the solution and an example in the context of Educational Multimedia Systems (EMS). This template 
allows expressing solutions in a "methodology-independent" way and so they can be used with different 
Hypermedia design methods, such as OOHDM, RMM or W3DT [Bichler97]. For each pattern we add a short 
comment explaining why it is relevant to EMS. 

2.1 Navigational Context 

Problem: How to organize the EMS navigational structure, providing guidelines, information and 
relationships that depend on the current state of navigation, in such a way that information can be better 
presented and comprehended? 

Motivation: EIS usually involve dealing with collections (e.g. Concepts, Paintings, Cities, Persons, etc) 
These Collections may be explored in different ways, according to the task the user is performing. For example, 
we may want to explore Books of an author, Books on a certain period of time or literary movement, etc., and it 
is desirable to give the user different kinds of feed-back in different contexts, while allowing him to move easily 
from node to node. 

Suppose for example that in an EMS about inventors and inventions, we reach Thomas A. Edison and 
then we arrive to the Light Bulb invention. However, we can also reach the Light Bulb while exploring 
inventions during a specific period of time, following a history of the most famous inventions, or while visiting 
another invention such as the "Fluorescent Light" and we follow the link to related inventions. It is clear that we 
will explore the same object under three different perspectives: as a Thomas A. Edison's invention, as an 
invention of the past century, and as an invention related to others such as the Fluorescent Lamp. 

Solution: Decouple the navigational Objects from the context in which they are to be explored, and 
define objects' peculiarities as Decorators [Gamma95], that enrich the navigational interface when the object is 
visited in that context. Navigational contexts are composed of a set of Nodes (like Books or Inventions) and 
Context Links (links that connect objects in a context). 





Figure Error! Unknown switch argument. :Diagram of “Navigational Context” pattern and a working example 



Relevance to EMS: It is usual in EMS that the same concept may be reached from different “learning 

paths”; in each one of them we want to help the learner to explore other related concepts conforming with the 

actual context. The navigational context navigation pattern helps to group nodes in meaningful sets that can be 

easily explored. It also address the problem that arises when the same node belongs to more than a set by 

indicating that in each case the node must be decorated according to the context. 

2.2 Information Factoring 

Problem: How can we present information needed by the reader to understand a given 
topic/information unit? 

Motivation: This problem is of a particular interest in EMS. Many times, for example when introducing 
a new topic, it is necessary to refer to related concepts. The author has the possibility of adding links to the nodes 
of the referred concepts. But, if the reader is forced to navigate back and forth the original topic to read about 
complementary ones, the navigation overhead is high and the users’ focus desagregated through a number of 
nodes, instead of concentrating in one topic at time. Thus the effectiveness of having links with related 
information is reduced by the distraction penalty it imposes over the reader. 

Solution: This problem has been devised in hypertext systems from the early days. The usual technique 
is to activate those nodes of related information inside the current node. The user sees this "in-place activation" 
as a pop-up window that generally can be easily dismissed with an escape keystroke. In this way, the reader does 
not have to navigate to other nodes avoiding the inherent context switch and cognitive overhead. 

Known Uses: In the "The Way Things Works", complementary concepts are shown in this way in 
figure 3, where the concept of “energy” is mentioned in both topics, and a reference to a node containing its 
definition is given. Notice that the definition of energy is not a part of the topics but rather an independent node 
that is activated as a pop-up window. Also, the MS-Windows Help System [Win95], provides different ways of 
specifying anchors, depending whether the result of activating the anchor is navigation or in-place activation of 
the target node (these are called: jump-anchors and popup-anchors). 

Related Pattern: Information on demand [Rossi 97], since additional information enriches the contents 
by activating other nodes in pop-up windows. The difference with Information On Demand relies in that 
information is not part of the current node, that is, it is not part of the node’s attributes and might be accessed 
from other ways, not only from the current node. The user activates simultaneously other nodes of information. 

Relevance to EMS: This pattern address a common concern in EMS; how to provide background 
information to the reader without distracting his attention. 
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Figure Error! Unknown switch argument.:An Example of "Information Factoring" from the "The Way Things Work" CD. 



3. Organization of the interface 

3.1 Information-Interaction Decoupling 

Problem: How do you differentiate contents and various types of controls in the interface? 

Motivation: A page of a complex application display different contents, and is related to many other 
pages, thus providing many anchors. Moreover, if the page supplies means of control activation other than 



navigation (such as triggering some query), the user may experience cognitive overhead. It is well known that 
when too many anchors are provided in a text, the reader is distracted and cannot take profit of all of them. 

Solution: Separate the input communication channels from the output channels, by grouping both sets 
separately. Allow the "input interaction group" to remain fixed while "the output group" reacts dynamically to 
the control activation. Within the output group, it is also convenient to differentiate the "substantive information" 
(i.e. content) from the "status information". This solution not only improves the perception of a node's interface, 
but also the efficiency of the implementation. 

Example: in figure 3, all links to related information on the current topic are displayed on the left. The 
graphics/video relevant to the current topic is displayed in the middle. Notice there are no links in the text itself. 
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Figure Error! Unknown switch argument. Two examples of “Information-Interaction Decoupling” from the MS-Encarta97 
CD-ROM and the Discovery Channel’s educational web page (http://school.discovery.com/) 



3 2 Behavioral Grouping 

Problem: How to recognize the different types of controls in the interface so that the user can easily 
understand them? 

Motivation: A problem we usually face when building the interface of a EIS is how to organize control 
Objects (such as anchors, buttons, etc.) to produce a meaningful interface. In a typical EIS there are different 
kinds of active interface objects: those that provide "general" navigation, such as "back" button, or anchors for 
returning to indexes, objects that provide navigation inside a context; objects that control the interface, etc. Even 
when applying Information-Interaction decoupling, there may be a lot of different kinds of control objects. 

Solution: Group control interface objects according to their functionality in global, contextual, 
structural and application objects, and make each group to enhance comprehension. 

Example: in figure 4, the first picture is taken from MindQ's CD-Rom "An introduction to Java 
Applets" groups the navigation controls at the left and the current topic playing controls at the bottom. 




Figure Error! Unknown switch argument.: An example of "Behavioural Grouping” from the MindQ’s CD-ROM “An 

introduction to Java Applets”. 
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3.3 Behaviour Anticipation 

Problem: How do you tell the user the effect or consequence of activating an interface object? 

Motivation: Many times, when building an interface, it is necessary to combine different interface 
elements such as buttons, hotwords, media controls or even custom-designed controls. It is usual to find readers 
wondering what has happened after activating a control, and the exact consequence of the action performed. 

Solution: Provide feedback about the effect of activating each interface element. Choose the kind of 
feedback to be non-ambiguous and complete: different cursor shapes, highlighting, small text-based explanations 
called "tool tips". Also, these elements can be combined with sound and animations. If we are using the 
behavioural Grouping interface pattern we can select different kinds of feed-back according the kind of 
behaviour provided; when the interface controls refer to a particular media such as animation, we could use a 
small status field for that family. 

Example: In figure 5, there is an example from the Microsoft Atlas Encarta97. Each time the user 
positions the cursor over an interface element, a tool tip pops up with an explanation about the effect of 
activating the control. 




3.4 Process Feed-Back 

Problem: How do we keep the user informed about the status of the interaction in such a way the he 
knows what to expect? 

Motivation: When the user interacts with a hypermedia application, it may happen that many options 
result in non-atomic operations, such as getting information from the database, loading an image, or contacting 
another machine (in the case of the web browsers). In these cases, the user may feel the system didn't receive the 
order or simple is not working fine. As the user looses his patience without any positive feedback from the 
system but a silent screen, he may start retrying the last action or even any other action no matter whether it is 
connected or not with the sole target of getting some response. At this point, the user may have already lost the 
orientation and the task to be performed has been left in a second place. 

Solution: Provide a constant perceivable feedback about the status of the operation that is being carried 
out, indicating progress in the case of non-atomic operations. Analyze which operations are atomic and do not 
need to be tracked. For non-atomic operations, give information about the current status: beginning, progression 
and ending of the operation. The kind of feedback depends on what kind of operation is involved: network 
connection, file loading or database search. 

Related Patterns: Both process-feedback and behaviour anticipation address a similar problem: giving 
prompt feedback to the user about the actions he is performing. 

Known Uses: In Web Browsers like Netscape Navigator and MS-Explorer, process feedback is given 
through a status bar showing the state of the http connection. On many CDs, the feedback given to the user is to 
set the cursor to the OS busy-hourglass. However, there are others that explicitly implements such feed to the 
user, as the example shown below. 

Example: In figure 6, we can see an example of “Process Feedback”, from the “Programming Java 
Applets” CD. The slider bar tells the user about the amount of information that remains for a given topic, and the 
rolling knob tells that animation is taking place. 




Figure Error! Unknown switch argument.: A “Process Feedback” example from Mind Q’s CD-ROM “ 



4. Conclusion 

The process of designing and building educational hypermedia applications is far from being a simple 
task. There are several methodologies that already provide the necessary constructs and support for the different 
design tasks, though none the means to record the author experience and knowledge in the field. 

We claim that through the use of patterns, authors are now able to identify common design problems 
and express solutions in a methodology-independent manner. Furthermore, now authors can talk about their 
designs with a common language and learn which were the ideas behind successful educational hypermedia 
systems. 

In this paper we have presented some patterns we have found in different educational hypermedia 
systems on CD-ROMs and WWW. These patterns address important concerns in EMS and they can be used 
together to build complex but effective systems. Our aim is to define a pattern system containing a rich set of 
patterns dealing with most relevant issues in EMS. 

It is our hope that, once a rich set of patterns is available, authors will be able to learn and work on 
multimedia systems at a higher levels of abstraction and with better results, since their work will be based on 
proven successful techniques. 
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